<template>
  <a-form ref="formRef" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" size="default">
    <slot name="form-item-wfSubProcess-name" :model="form" field="name">
      <a-form-item label="流程定义名称">
        <a-input v-model:value="form.name" />
      </a-form-item>
    </slot>
    <slot name="form-item-wfSubProcess-displayName" :model="form" field="displayName">
      <a-form-item label="流程定义显示名称">
        <a-input v-model:value="form.displayName" />
      </a-form-item>
    </slot>
    <slot name="form-item-wfSubProcess-form" :model="form" field="form">
      <a-form-item label="表单">
        <a-input v-model:value="form.form" />
      </a-form-item>
    </slot>
    <slot name="form-item-wfSubProcess-version" :model="form" field="version">
      <a-form-item label="版本号">
        <a-input v-model:value="form.version" />
      </a-form-item>
    </slot>
    <slot name="form-item-wfSubProcess-width" :model="form" field="width">
      <a-form-item label="宽度">
        <a-input-number :step="5" v-model:value="form.width" />
      </a-form-item>
    </slot>
    <slot name="form-item-wfSubProcess-height" :model="form" field="height">
      <a-form-item label="高度">
        <a-input-number :step="5" v-model:value="form.height" />
      </a-form-item>
    </slot>
  </a-form>
</template>
<script lang="ts" setup>
  import { reactive, ref, watch, defineProps, onMounted, defineEmits } from 'vue';
  import { FlowFormModel } from '../types';
  // 注意:ref不能与model一样，相同的话表单双向绑定将会失效
  const formRef = ref(null);
  const form = reactive<FlowFormModel>({} as FlowFormModel);
  // 表单样式
  const labelCol = { span: 6 };
  const wrapperCol = { span: 18 };
  // 定义属性
  const props = defineProps<{
    value: FlowFormModel;
  }>();
  const emits = defineEmits(['update:value']);
  watch(
    () => form,
    () => {
      emits('update:value', Object.assign(props.value, form));
    },
    { deep: true }
  );

  onMounted(() => {
    Object.assign(form, props.value);
  });
</script>
